<template>
  <form class="dataForm-container" @submit.prevent="handleSubmit()" ref="dataForm">
    <!-- 用户昵称 -->
    <div class="username">
      <div class="username-input">
        <input
          type="text"
          maxlength="10"
          placeholder="用户昵称"
          v-model="formData.username"
        />
        <span class="tip">{{ formData.username.length }}/10</span>
      </div>
      <div class="error">{{ error.username }}</div>
    </div>
    <!-- 评论区 -->
    <div class="textarea">
      <div class="textarea-input">
        <textarea
          maxlength="300"
          placeholder="输入内容"
          v-model="formData.textarea"
        ></textarea>
        <span class="tip">{{ formData.textarea.length }}/300</span>
      </div>
      <div class="error">{{ error.textarea }}</div>
    </div>
    <!-- 提交按钮 -->
    <div class="form-btn">
      <button :disabled="isSubmiting">
        {{ isSubmiting ? "提交中..." : "提交" }}
      </button>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      isSubmiting: false,
      formData: {
        username: "",
        textarea: "",
      },
      error: {
        username: "",
        textarea: "",
      },
    };
  },
  methods: {
    handleSubmit() {
      this.formData.username
        ? (this.error.username = "")
        : (this.error.username = "请填写用户昵称");
      this.formData.textarea
        ? (this.error.textarea = "")
        : (this.error.textarea = "请填写内容");
      if (this.error.username || this.error.textarea) {
        return;
      }
      this.isSubmiting = true;
      this.$emit("submitData",[this.formData.username,this.formData.textarea], ()=> {
        this.isSubmiting = false;
        this.formData.username=''
        this.formData.textarea=''
         this.$showMessage('评论成功','success',1000,this.$refs.dataForm,()=>{
            console.log('评论成功');
        })
      });

    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.dataForm-container {
  margin-bottom: 20px;
  .username {
    margin-bottom: 8px;
    width: 50%;
    .username-input {
      position: relative;
    }
  }
  .textarea-input {
    position: relative;
  }
}
.tip {
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: gray;
  font-size: 12px;
}
input,
textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px dashed gray;
  outline: none;
  color: #000;
  font-size: 14px;
  border-radius: 4px;
  &:focus {
    color: blue;
  }
}
input {
  padding: 0 15px;
  height: 40px;
}
textarea {
  resize: none;
  padding: 8px 15px;
  height: 120px;
}
.error {
  margin-top: 6px;
  color: red;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
}
button {
  position: relative;
  cursor: pointer;
  border: none;
  outline: none;
  width: 100px;
  height: 34px;
  color: #fff;
  border-radius: 4px;
  background: blue;
  &:hover {
    background: rgb(90, 90, 245);
  }
  &:disabled {
    background: gray;
    cursor: not-allowed;
  }
}
</style>